<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <title>小帆博客</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width" />

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link rel="stylesheet" href="/templates/chahua2601/css/main.css" />
    <link rel="stylesheet" href="/templates/chahua2601/css/style.css" />
    <link rel="stylesheet" href="/templates/chahua2601/css/nivo-slider.css" />
    <link rel="stylesheet" media="all" href="/templates/chahua2601/css/responsive.css" />

    <script src="/templates/chahua2601/js/modernizr-2.6.1.min.js"></script>

    <!-- GOOGLE FONTS -->
    <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,200' rel='stylesheet' type='text/css' />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<!-- TOP -->
<div id="top-page" class="cf">

    <!-- search -->
    <form method="get" id="searchform" action="#" class="cf" />
    <input type="submit" id="searchsubmit" value=" " />
    <input type="text" value="" name="s" id="s" placeholder="搜索" />
    </form>
    <!-- ENDS search -->

    <!-- Social bar -->
    <ul id="social-bar" class="cf">
        <li><a href="{{route('logins')}}" title="登录" style="color: #fff3cd">登录</a></li>
        <li><a href="#" title="注册" style="color: #fff3cd">注册</a></li>
        {{--<li class="dribbble"><a href="#" title="Dribbble"></a></li>--}}
        {{--<li class="dribbble"><a href="#" title="Dribbble"></a></li>--}}
        {{--<li class="facebook"><a href="#" title="Facebook"></a></li>--}}
        {{--<li class="forrst"><a href="#" title="forrst"></a></li>--}}
        {{--<li class="googleplus"><a href="#" title="googleplus"></a></li>--}}
        {{--<li class="twitter"><a href="#" title="twitter"></a></li>--}}
    </ul>
    <!-- ENDS Social bar -->

</div>
<!-- ENDS TOP -->
<!-- 头部开始 -->
<header class="cf">

    <!-- nav -->
    <nav class="cf">

        <!-- 导航开始 -->
        <ul id="left-nav" class="sf-menu">
            <li><a href="{{route('work')}}">文章</a></li>
            <li><a href="{{route('blog')}}">博客</a></li>
            {{--class="current-menu-item" 选中效果--}}
            <li ><a href="/">首页</a></li>
        </ul>
        <!-- 导航结束 -->
        <!-- right nav -->
        <ul id="right-nav" class="sf-menu">
            <li><a href="{{route('page')}}">科普</a>
                <ul>
                    <li><a href="{{route('page')}}">PHP</a></li>
                </ul>
            </li>
            <li><a href="{{route('contact')}}">联系我</a></li>
            <li><a href="{{route('other')}}">其他</a></li>
        </ul>
        <!-- ENDS right nav -->

    </nav>
    <!-- nav -->
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
    <link rel="stylesheet" href="/templates/chahua2601/css/animate.min.css">
    <style>
        .test-btn{
            margin:50px 100px;
        }

    </style>
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
    <script>
        //animate.css动画触动一次方法
        $.fn.extend({
            animateCss: function (animationName) {
                var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
                this.addClass('animated ' + animationName).one(animationEnd, function() {
                    $(this).removeClass('animated ' + animationName);
                });
            }
        });
        /**
         * 显示模态框方法
         * @param targetModel 模态框选择器，jquery选择器
         * @param animateName 弹出动作
         * @ callback 回调方法
         */
        var modalShow = function(targetModel, animateName, callback){
            var animationIn = ["bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp",
                "fadeIn", "fadeInDown", "fadeInLeft", "fadeInRight", "fadeOutUp",
                "fadeInDownBig", "fadeInLeftBig", "fadeOutRightBig", "fadeOutUpBig","flipInX","flipInY",
                "lightSpeedIn","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight",
                "zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp","slideInDown","slideInLeft",
                "slideInRight", "slideInUp","rollIn"];
            if(!animateName || animationIn.indexOf(animateName)==-1){
                console.log(animationIn.length);
                var intRandom =  Math.floor(Math.random()*animationIn.length);
                animateName = animationIn[intRandom];
            }
            console.log(targetModel + " " + animateName);
            $(targetModel).show().animateCss(animateName);
            callback.call(this);
        }
        /**
         * 隐藏模态框方法
         * @param targetModel 模态框选择器，jquery选择器
         * @param animateName 隐藏动作
         * @ callback 回调方法
         */
        var modalHide = function(targetModel, animateName, callback){
            var animationOut = ["bounceOut","bounceOutDown","bounceOutLeft","bounceOutRight","bounceOutUp",
                "fadeOut", "fadeOutDown", "fadeOutLeft", "fadeOutRight", "fadeOutUp",
                "fadeOutDownBig", "fadeOutLeftBig", "fadeOutRightBig", "fadeOutUpBig","flipOutX","flipOutY",
                "lightSpeedOut","rotateOut","rotateOutDownLeft","rotateOutDownRight","rotateOutUpLeft","rotateOutUpRight",
                "zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp",
                "zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp","slideOutDown","slideOutLeft",
                "slideOutRight", "slideOutUp","rollOut"];
            if(!animateName || animationOut.indexOf(animateName)==-1){
                console.log(animationOut.length);
                var intRandom =  Math.floor(Math.random()*animationOut.length);
                animateName = animationOut[intRandom];
            }
            $(targetModel).children().click(function(e){e.stopPropagation()});
            $(targetModel).animateCss(animateName);
            $(targetModel).delay(900).hide(1,function(){
                $(this).removeClass('animated ' + animateName);
            });
            callback.call(this);
        }

        var modalDataInit = function(info){
            //alert(info);
            //填充数据，对弹出模态框数据样式初始化或修改
        }
    </script>
    <!-- logo -->
    <div id="logo">
        <a href="/"><img src="/templates/chahua2601/img/logo.png" alt="" /></a>
    </div>
    <!-- ENDS logo -->
</header>
<!-- 头部结束 -->
<button type="button" class="btn btn-primary  test-btn" onclick="modalShow('#bigModal', '', modalDataInit('test'));">登录注册</button>
<div class="modal bs-example-modal-lg"  onclick="modalHide('#bigModal', '');" id="bigModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" onclick="modalHide('#bigModal', '');" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span  class="sr-only">Close</span></button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">

            </div>
        </div>
    </div>
</div>

<!-- FOOTER -->
<footer class="cf">
    <div id="bottom-left">
        <script src="/templates/chahua2601/js/chirp.min.js"></script>
        <script>Chirp({user:'ansimuz',max:1})</script></div>
    <div id="bottom-right">copyright by <a href="http://www.cdblog.xin">cdblog.xin</a> </div>
    <div id="bottom-right" style="text-align: center"><a href="http://www.miitbeian.gov.cn">京ICP备17049858号-1</a> </div>
</footer>
<!-- ENDS FOOTER -->

<!-- JavaScript at the bottom for fast page loading -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/templates/chahua2601/js/jquery-1.8.0.min.js"><\/script>')</script>
<!-- superfish -->
<script src="/templates/chahua2601/js/superfish-1.4.8//templates/chahua2601/js/hoverIntent.js"></script>
<script src="/templates/chahua2601/js/superfish-1.4.8//templates/chahua2601/js/superfish.js"></script>
<script src="/templates/chahua2601/js/superfish-1.4.8//templates/chahua2601/js/supersubs.js"></script>
<!-- ENDS superfish -->
<script src="/templates/chahua2601/js/jquery.nivo.slider.js"></script>
<script src="/templates/chahua2601/js/tabs.js"></script>
<script src="/templates/chahua2601/js/css3-mediaqueries.js"></script>
<script src="/templates/chahua2601/js/jquery.isotope.min.js"></script>
<script src="/templates/chahua2601/js/custom.js"></script>
<!-- ENDS javascripts -->
</body>
</html>


